<template>
  <div id="iDterminal">
    <!--操作和搜索-->
    <div class="rowBC">
      <!--操作-->
      <div style="margin-bottom: 18px">
        <el-button type="primary" icon="el-icon-plus" @click.stop.prevent="dialogVisible=true">新增</el-button>
        <el-button type="primary" icon="el-icon-delete" @click.stop.prevent="deleteBatchIdsReq()">删除</el-button>
        <el-button type="primary" icon="el-icon-folder-opened" @click.stop.prevent="drDialogVisible=true">导入</el-button>
        <el-button type="primary" icon="el-icon-upload" @click.stop.prevent="tableExportReq()">导出</el-button>
        <el-button type="primary" icon="el-icon-download" @click.stop.prevent="tableDownLoadTempReq()">模板下载</el-button>
      </div>
    </div>
    <!--条件搜索-->
    <el-form ref="refsearchForm" :inline="true" class="demo-searchForm">
      <el-form-item
        label-width="0px"
        label=""
        prop="bindStatus"
        class="widthPx-180"
        label-position="left"
      >
        <el-cascader
          :key="cascaderKeyMixin"
          v-model="vehicleCategoryArr"
          filterable
          placeholder="车辆品牌"
          clearable
          :props="SetKesDeptMixin"
          :options="vehicleCategoryOptionData"
          @change="casVehicleCategory"
        />
      </el-form-item>
      <el-form-item
        label-width="0px"
        label=""
        prop="pasterSimCode"
        label-position="left"
      >
        <el-input v-model="searchForm.pasterSimCode" class="widthPx-120" placeholder="SIM卡号" />
      </el-form-item>
      <el-form-item
        label-width="0px"
        label=""
        prop="deviceCode"
        label-position="left"
      >
        <el-input v-model="searchForm.deviceCode" class="widthPx-130" placeholder="设备SN号" />
      </el-form-item>
      <el-form-item
        label-width="0px"
        label=""
        prop="workunitId"
        label-position="left"
      >
        <el-cascader
          :key="cascaderKeyMixin"
          v-model="workunitIdArr"
          filterable
          placeholder="所属机构"
          clearable
          class="widthPx-120"
          :props="SetKesDeptMixinNoStrictly"
          :options="workUnitOptionData"
          :show-all-levels="false"
          @change="casVehicleCategory"
        />
      </el-form-item>
      <el-form-item
        label-width="0px"
        label=""
        prop="bindStatus"
        label-position="left"
      >
        <el-select
          v-model="searchForm.bindStatus"
          filterable
          allow-create
          clearable
          default-first-option
          class="widthPx-100 mrPx-6"
          placeholder="全部状态"
        >
          <el-option :value="true" label="已绑车辆" />
          <el-option :value="false" label="未绑车辆" />
        </el-select>
      </el-form-item>
      <!--查询按钮-->
      <el-button type="primary" @click.stop="searchBtnClick">查询</el-button>
    </el-form>
    <!--表格和分页-->
    <el-table
      id="resetElementDialog"
      ref="refterminalTable"
      v-loading="tableLoading"
      height="calc(100vh - 230px)"
      size="mini"
      border
      :data="terminalListData"
      style="width: 100%"
      element-loading-background="rgba(3, 3, 3, 0.1)"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
    >
      <!--多选框-->
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        align="center"
        prop="deviceCode"
        label="设备SN号"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="pasterSimCode"
        label="SIM卡号"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="vehicleCategory"
        label="车辆品牌"
        min-width="100"
      />

      <el-table-column
        align="center"
        prop="organizationName"
        label="所属机构"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="terminalKind"
        label="协议类型"
        min-width="100"
      />
      <el-table-column
        align="center"
        prop="vinAndRegistrationNo"
        label="车辆"
        min-width="100"
      >
        <template slot-scope="scope">
          <span style="white-space: pre-wrap">{{ scope.row.vinAndRegistrationNo }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="terminalModel"
        label="设备类型"
        min-width="100"
      />
      <!--点击操作-->
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="100"
      >
        <template slot-scope="{row,$index}">
          <ElementIconUseBtn
            icon-tooltip="编辑"
            icon-name="el-icon-edit-outline"
            icon-color="#409EFF"
            @click.native="tableHandleEditClick(row)"
          />
          <ElementIconUseBtn
            icon-tooltip="删除"
            icon-name="el-icon-delete-solid"
            icon-color="#F56C6C"
            :icon-disabled="row.vehicle?true:false"
            @click.native="deleteByIdReq(row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block columnCC mt-2 mb-5">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!--编辑和删除-->
    <el-dialog
      :title="`${modalShowTitle}`"
      :visible.sync="dialogVisible"
      width="47%"
      class="elODialogModalBodyH60vh elODialogModal"
      :close-on-click-modal="false"
      :before-close="beforeCloseModal"
    >
      <el-form
        ref="refForm"
        :inline="true"
        :model="submitForm"
        :rules="subFromRules"
        label-width="140px"
        class="pr-5"
      >
        <el-form-item
          label-width="120px"
          label="设备SN号"
          prop="deviceCode"
          :rules="subFromRules.isNotNull"
          label-position="left"
        >
          <el-input v-model="submitForm.deviceCode" class="widthPx-150" placeholder="设备SN号" />
        </el-form-item>
        <el-form-item
          label-width="100px"
          label="SIM卡号"
          prop="pasterSimCode"
          :rules="subFromRules.isNotNull"
          label-position="left"
        >
          <el-input v-model="submitForm.pasterSimCode" class="widthPx-150" placeholder="SIM卡号" />
        </el-form-item>

        <el-form-item
          class="d-block"
          label-width="120px"
          label="支持"
          prop="supportBluetooth"
          label-position="left"
        >
          <el-checkbox
            v-model="submitForm.supportBluetooth"
            true-label="true"
            false-label="false"
          >蓝牙</el-checkbox>
          <el-checkbox
            v-model="submitForm.supportWifi"
            true-label="true"
            false-label="false"
          >WiFi</el-checkbox>
        </el-form-item>
        <el-form-item
          label-width="120px"
          style="display: block"
          label="IMEI号码"
          prop="imeiCode"
          label-position="left"
        >
          <el-input v-model="submitForm.imeiCode" class="widthPx-200" placeholder="IMEI号" />
        </el-form-item>
        <el-form-item
          label-width="120px"
          style="display: block"
          label="ICCID"
          prop="iccidCode"
          :rules="subFromRules.isNotNull"
          label-position="left"
        >
          <el-input v-model="submitForm.iccidCode" class="widthPx-200" placeholder="ICCID" />
        </el-form-item>
        <el-form-item
          label-width="120px"
          style="display: block"
          label="IMSI"
          prop="imsiCode"
          label-position="left"
        >
          <el-input v-model="submitForm.imsiCode" class="widthPx-200" placeholder="IMSI" />
        </el-form-item>
        <el-form-item
          label-width="120px"
          style="display: block"
          label="所属机构"
          prop="workunitSubIdArr"
          :rules="subFromRules.isNotNull"
          label-position="left"
        >
          <el-cascader
            :key="cascaderKeyMixin"
            v-model="submitForm.workunitSubIdArr"
            filterable
            placeholder="所属机构"
            clearable
            class="widthPx-200"
            :props="SetKesDeptMixinNoStrictly"
            :options="workUnitOptionData"
            @change="casHandleChangeMixin"
          />
        </el-form-item>
        <el-form-item
          label-width="120px"
          style="display: block"
          label="设备类型"
          prop="terminalModelIdArr"
          :rules="subFromRules.isNotNull"
          label-position="left"
        >
          <el-cascader
            :key="cascaderKeyMixin"
            v-model="submitForm.terminalModelIdArr"
            filterable
            placeholder="设备类型"
            clearable
            class="widthPx-200"
            :props="SetKesDeptMixin"
            :options="terminalCategoryOptionData"
            @change="casHandleChangeMixin"
          />
        </el-form-item>
        <el-form-item
          label-width="120px"
          style="display: block"
          label="协议"
          prop="terminalKindId"
          :rules="subFromRules.isNotNull"
          label-position="left"
        >
          <el-select
            v-model="submitForm.terminalKindId"
            filterable
            allow-create
            default-first-option
            class="widthPx-200 mrPx-6"
            placeholder="协议"
          >
            <el-option
              v-for="(item) in terminalKindOptionData"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: right">
        <el-button type="primary" @click="beforeCloseModal">取 消</el-button>
        <el-button type="primary" @click="dialogConfirmBtn">确 定</el-button>
      </span>
    </el-dialog>
    <!--导入table格式校验-->
    <el-dialog
      :title="`${drModalShowTitle}`"
      :visible.sync="drDialogVisible"
      width="80%"
      class="elODialogModalBodyH60vh elODialogModal"
      :close-on-click-modal="false"
      :before-close="drBeforeCloseModal"
    >
      <el-form
        ref="refForm"
        :inline="true"
        :model="submitForm"
        :rules="subFromRules"
        label-width="140px"
        class="pr-5"
      >

        <el-form-item
          label-width="120px"
          style="display: block"
          label-position="left"
          label="选择EXCEL文件:"
        >
          <div class="rowSS">
            <el-button type="primary" @click="goUploadFileMixin">
              <i class="el-icon-upload2" />上传
              <input id="file" ref="refSettingFile" type="file" style="display: none;" @change="tableImportReq">
            </el-button>
            <div class="ml-1">{{ this.chooseFileName }}</div>
          </div>
        </el-form-item>
      </el-form>
      <!--table-->
      <el-table
        ref="drRefterminalTable"
        v-loading="tableLoading"
        size="mini"
        border
        :data="drTerminalListData"
        style="width: 100%"
        element-loading-background="rgba(3, 3, 3, 0.1)"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
      >
        <!--点击操作-->
        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="60"
        >
          <template slot-scope="{row,$index}">
            <ElementIconUseBtn
              icon-tooltip="删除"
              icon-name="el-icon-delete-solid"
              icon-color="#F56C6C"
              @click.native="deleteDRBtn(row,$index)"
            />
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="organizationName"
          label="所属机构"
          min-width="100"
        >
          <template slot-scope="{row,$index}">
            <div :class="[row.organizationName&&row.organizationName.split(',').length===2&&'colErrorBg']">{{ row.organizationName&&row.organizationName.split(',')[0] }}</div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="deviceCode"
          label="设备SN号"
          min-width="100"
        >
          <template slot-scope="{row,$index}">
            <div :class="[row.deviceCode&&row.deviceCode.split(',').length===2&&'colErrorBg']">{{ row.deviceCode&&row.deviceCode.split(',')[0] }}</div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="pasterSimCode"
          label="SIM卡号"
          min-width="100"
        >
          <template slot-scope="{row,$index}">
            <div :class="[row.pasterSimCode&&row.pasterSimCode.split(',')[1]&&'colErrorBg']">
              {{ row.pasterSimCode&&row.pasterSimCode.split(',')[0] }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="imeiCode"
          label="IMEI号码"
          min-width="100"
        >
          <template slot-scope="{row,$index}">
            <div :class="[row.imeiCode&&row.imeiCode.split(',').length===2&&'colErrorBg']">
              {{ row.imeiCode&&row.imeiCode.split(',')[0] }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="iccidCode"
          label="ICCID"
          min-width="100"
        >
          <template slot-scope="{row,$index}">
            <div :class="[row.iccidCode&&row.iccidCode.split(',').length===2&&'colErrorBg']">
              {{ row.iccidCode&&row.iccidCode.split(',')[0] }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="imsiCode"
          label="IMSI"
          min-width="100"
        >
          <template slot-scope="{row,$index}">
            <div :class="[row.imsiCode&&row.imsiCode.split(',').length===2&&'colErrorBg']">
              {{ row.imsiCode&&row.imsiCode.split(',')[0] }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="terminalModel"
          label="型号"
          min-width="100"
        >
          <template slot-scope="{row,$index}">
            <div :class="[row.terminalModel&&row.terminalModel.split(',').length===2&&'colErrorBg']">
              {{ row.terminalModel&&row.terminalModel.split(',')[0] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="terminalKind"
          label="协议类型"
          min-width="100"
        >
          <template slot-scope="{row,$index}">
            <div :class="[row.terminalKind&&row.terminalKind.split(',').length===2&&'colErrorBg']">
              {{ row.terminalKind&&row.terminalKind.split(',')[0] }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="terminalKind"
          label="支持wifi"
          min-width="100"
        >
          <template slot-scope="{row,$index}">
            <div :class="[row.supportWifiStr&&row.supportWifiStr.split(',').length===2&&'colErrorBg']">
              {{ row.supportWifiStr&&row.supportWifiStr.split(',')[0] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="terminalKind"
          label="支持蓝牙"
          min-width="100"
        >
          <template slot-scope="{row,$index}">
            <div :class="[row.supportBluetoothStr&&row.supportBluetoothStr.split(',').length===2&&'colErrorBg']">
              {{ row.supportBluetoothStr&&row.supportBluetoothStr.split(',')[0] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="ok"
          label="检查结果"
          width="80"
        >
          <template slot-scope="{row,$index}">
            <ElementIconUseNoTip v-if="row.ok" icon-color="green" icon-name="el-icon-check" icon-size="22px" />
            <ElementIconUseNoTip v-else icon-color="#F56C6C" icon-name="el-icon-close" icon-size="22px" />
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer" style="text-align: right">
        <el-button type="primary" @click="drBeforeCloseModal">取 消</el-button>
        <el-button type="primary" :disabled="!drTerminalListIsCanSubmit" @click="drDialogConfirmBtn">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'DeviceInfoManage',
  components: {
    // TablesGZCJ,
  },
  // mixins: [elementUiCDataOrMethod],
  props: {
    // treeData: Array,
  },
  // mixins: [validMixins],
  data() {
    return {
      // form表单和rule验证
      submitForm: {
        'deviceCode': '',
        'id': null,
        'iccidCode': '',
        'imeiCode': '',
        'imsiCode': '',
        'pasterSimCode': '',
        'terminalKindId': null,
        'terminalModelId': null,
        'supportBluetooth': null,
        'supportWifi': null,
        'workunitId': null
      },
      searchForm: {
        bindStatus: '',
        deviceCode: '',
        pasterSimCode: '',
        workunitId: '',
        vehicleBrandId: '',
        vehicleModelId: '',
        vehicleSeriesId: ''
        // workunitSubIdArr:[],
        // terminalModelIdArr:[],
      },
      subFromRules: {
        isNotNull: [
          { required: true, message: '该字段不能为空', trigger: 'blur' }
        ]
      },
      pageSize: 10,
      pageNum: 1,
      pageTotal: 100,
      rowDeleteIdArr: [],
      isDialogEdit: false,
      dialogVisible: false,
      tableLoading: false,
      /* 级联*/
      vehicleCategoryArr: [], // 车辆品牌
      workunitIdArr: [], // 最高机构
      /* 请求部分*/
      terminalListData: [],
      modalShowTitle: '新增设备',
      vehicleCategoryOptionData: [],
      areaOptionData: [],
      terminalKindOptionData: [],
      workUnitOptionData: [],
      terminalCategoryOptionData: [],

      /* 导入格式校验*/
      drTerminalListData: [],
      drTerminalListIsCanSubmit: null,
      drModalShowTitle: '批量导入设备',
      drDialogVisible: false,
      chooseFileName: ''
    }
  },
  computed: {
    // ...mapState('user', ['token', 'userInfo'])
  },
  watch: {
    // 'cmAddForm.enginePlatform': function(val) {
    //   console.log('enginePlatformval', val)
    //   if (val) {
    //     this.emissionOptionReq()
    //   }
    // }
  },
  created() {

  },
  mounted() {
    this.selectPageReq()
    // select option选项
    // this.areaOptionReq()
    this.terminalCategoryOptionReq()
    this.vehicleCategoryOptionReq()
    this.terminalKindOptionReq()
    this.workUnitOptionReq()
  },
  methods: {
    // ...mapActions('user', ['closeSideBar']),
    // ...mapMutations('user', ['CHAGE_TOKEN']),
    /* 导入和导出*/
    // 对导入的Excel进行检查
    // 下载模板
    tableDownLoadTempReq() {
      const url = 'http://ccr.ruixiude.com:11100/template/设备导入模板.xlsx'
      const link = document.createElement('a')
      link.href = url
      document.body.appendChild(link)
      link.click()
    },
    deleteDRBtn(row, index) {
      this.drTerminalListData.splice(index, 1)
      this.checkDrExcel()
    },
    checkDrExcel() {
      for (let i = 0; i < this.drTerminalListData.length; i++) {
        const rowItem = this.drTerminalListData[i]
        if (!rowItem.ok) {
          this.drTerminalListIsCanSubmit = false
          return
        }
        if (i === this.drTerminalListData.length - 1) {
          this.drTerminalListIsCanSubmit = true
        }
      }
    },
    tableImportReq() {
      const formData = new FormData()
      formData.append('excelFile', this.$refs.refSettingFile.files[0])
      this.$axiosReq({
        url: '/rxdrepairsaas-basiccenter/terminal/import',
        data: formData, method: 'post', bfLoading: true, isUploadFile: true
      }).then(res => {
        console.log('文件解析回来的地址', res)
        // 存储文件名称
        const filename = this.$refs.refSettingFile.value
        this.chooseFileName = filename.slice(filename.lastIndexOf('\\') + 1)
        this.$refs.refSettingFile.value = ''
        this.drTerminalListData = res.data.list
        this.drTerminalListIsCanSubmit = res.data.ok
      }).catch(err => {
        console.log('错误', err)
        this.$refs.refSettingFile.value = ''
      })
    },
    // 导出table文件
    tableExportReq() {
      if (this.vehicleCategoryArr.length > 0) {
        this.searchForm.vehicleBrandId = this.vehicleCategoryArr[0]
        this.searchForm.vehicleSeriesId = this.vehicleCategoryArr[1]
        this.searchForm.vehicleModelId = this.vehicleCategoryArr[2]
      } else {
        this.searchForm.vehicleBrandId = null
        this.searchForm.vehicleSeriesId = null
        this.searchForm.vehicleModelId = null
      }
      if (this.workunitIdArr.length > 0) {
        this.searchForm.workunitId = this.workunitIdArr[this.workunitIdArr.length - 1]
      } else {
        this.searchForm.workunitId = null
      }
      const data = Object.assign(this.searchForm, { pageNum: this.pageNum, pageSize: this.pageSize })
      console.log('selectPageReqdata', data)

      this.$axiosReq({
        baseURL:"",
        url: '/rxdrepairsaas-basiccenter/terminal/export', data,timeout:10000000,
        method: 'get', bfLoading: true, isParams: true, isDownLoadFile: true
      }).then(res => {
        const url = window.URL.createObjectURL(new Blob([res]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', `设备报表-${this.todayTimeMixin}.xlsx`)
        document.body.appendChild(link)
        link.click()
      })
    },
    drBeforeCloseModal() {
      this.drDialogVisible = false
    },
    // 批量新增数据
    drDialogConfirmBtn() {
      const data = this.drTerminalListData
      this.$axiosReq({
        url: 'rxdrepairsaas-basiccenter/terminal/batchInsert', data,
        method: 'post', bfLoading: true
      }).then(res => {
        this.elMessage('批量新增数据成功')
        this.drDialogVisible = false
        this.selectPageReq()
      })
    },
    // table
    tableCheckSelect(rows) {
      console.log('rows', rows)
      const rowDeleteIdArr = rows.map(item => {
        return item.id
      })
      this.rowDeleteIdArr = rowDeleteIdArr
    },
    /* 分页*/
    handleSizeChange(val) {
      this.pageSize = val
      this.selectPageReq()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNum = val
      this.selectPageReq()
    },
    /* modal*/
    beforeCloseModal() {
      this.resetData()
    },
    resetData() {
      this.modalShowTitle = '修改设备'
      // 重置数据
      this.submitForm = {
        'deviceCode': '',
        'id': null,
        'iccidCode': '',
        'imeiCode': '',
        'imsiCode': '',
        'pasterSimCode': '',
        'terminalKindId': null,
        'terminalModelId': null,
        'workunitId': null,
        'supportBluetooth': null,
        'supportWifi': null
      }
      this.dialogVisible = false
      this.isDialogEdit = false
    },
    dialogConfirmBtn() {
      // 数据字段处理
      const validFuc = (valid) => {
        if (valid) {
          if (this.isDialogEdit) {
            // 编辑
            this.updateByIdReq()
          } else {
            this.insertReq()
          }
        }
      }
      this.$refs.refForm.validate(validFuc)
    },
    async tableHandleEditClick(row) {
      // 获取详情数据
      const detailData = await this.selectByIdReq(row.id)
      this.reshowData(detailData)
      // 显示弹框
      this.isDialogEdit = true
      this.dialogVisible = true
    },
    reshowData(row) {
      console.log('详情数据', row)
      this.modalShowTitle = '设备编辑'
      Object.keys(row).forEach(fItem => {
        Object.keys(this.submitForm).forEach(sItem => {
          if (fItem === sItem) {
            // console.log('复制了', sItem)
            this.submitForm[sItem] = row[sItem]
          }
        })
      })
      this.submitForm.workunitSubIdArr = JSON.parse(row.workunitString)
      this.submitForm.terminalModelIdArr = JSON.parse(row.terminalString)
      console.log('编辑后的submitForm数据', this.submitForm)
    },
    searchBtnClick() {
      this.pageNum = 1
      this.selectPageReq()
    },
    /* 级联数据处理*/
    casVehicleCategory(casArr) {
      console.log('casVehicleCategory', casArr)
    },
    /* 请求*/
    selectPageReq() {
      if (this.vehicleCategoryArr.length > 0) {
        this.searchForm.vehicleBrandId = this.vehicleCategoryArr[0]
        this.searchForm.vehicleSeriesId = this.vehicleCategoryArr[1]
        this.searchForm.vehicleModelId = this.vehicleCategoryArr[2]
      } else {
        this.searchForm.vehicleBrandId = null
        this.searchForm.vehicleSeriesId = null
        this.searchForm.vehicleModelId = null
      }
      if (this.workunitIdArr.length > 0) {
        this.searchForm.workunitId = this.workunitIdArr[this.workunitIdArr.length - 1]
      } else {
        this.searchForm.workunitId = null
      }
      const data = Object.assign(this.searchForm, { pageNum: this.pageNum, pageSize: this.pageSize })
      console.log('selectPageReqdata', data)
      Object.keys(data).forEach(fItem => {
        if (data[fItem] === '' || data[fItem] === null || data[fItem] === undefined) delete data[fItem]
      })
      this.$axiosReq({
        url: 'rxdrepairsaas-basiccenter/terminal', data, isParams: true,
        method: 'get', bfLoading: true
      }).then(res => {
        console.log('返回的数据', res)
        this.terminalListData = res.data.list
        this.pageTotal = res.data.total
      })
    },

    insertReq() {
      this.submitForm.workunitId = this.submitForm.workunitSubIdArr[this.submitForm.workunitSubIdArr.length - 1]
      this.submitForm.terminalModelId = this.submitForm.terminalModelIdArr[this.submitForm.terminalModelIdArr.length - 1]
      // 删除formModal id
      const data = JSON.parse(JSON.stringify(this.submitForm))
      delete data.id
      this.$axiosReq({
        url: 'rxdrepairsaas-basiccenter/terminal', data,
        method: 'post', bfLoading: true
      }).then(res => {
        this.elMessage('添加成功')
        this.dialogVisible = false
        this.resetData()
        this.selectPageReq()
      })
    },
    updateByIdReq() {
      this.submitForm.workunitId = this.submitForm.workunitSubIdArr[this.submitForm.workunitSubIdArr.length - 1]
      this.submitForm.terminalModelId = this.submitForm.terminalModelIdArr[this.submitForm.terminalModelIdArr.length - 1]
      const data = JSON.parse(JSON.stringify(this.submitForm))
      this.$axiosReq({
        url: `rxdrepairsaas-basiccenter/terminal/${this.submitForm.id}`, data,
        method: 'PUT', bfLoading: true
      }).then(res => {
        this.elMessage('更新成功')
        this.dialogVisible = false
        this.resetData()
        this.selectPageReq()
      })
    },
    // 根据id查看详情
    selectByIdReq(id) {
      return new Promise((resolve) => {
        this.$axiosReq({
          url: `rxdrepairsaas-basiccenter/terminal/${id}`,
          method: 'get', bfLoading: true, isParams: true
        }).then(res => {
          resolve(res.data)
        })
      })
    },
    // 删除单个
    async deleteByIdReq(row) {
      if (!(row && row.id)) {
        this.elMessage('删除单个的id不能为空', 'warning')
        return
      }
      const deleteNameTitle = row.deviceCode
      await this.elConfirm('删除', `您确定要删除${deleteNameTitle}吗`)
      const data = [row.id]
      console.log('data', data)
      this.$axiosReq({
        url: `rxdrepairsaas-basiccenter/terminal`, data,
        method: 'DELETE', bfLoading: true
      }).then(res => {
        this.elMessage('删除成功')
        this.selectPageReq()
      })
    },

    // 批量删除
    async deleteBatchIdsReq() {
      let rowDeleteIdArr = []
      const selectionArr = this.$refs.refterminalTable
      let deleteNameTitle = ''
      rowDeleteIdArr = selectionArr.selection.map(mItem => {
        deleteNameTitle = deleteNameTitle + mItem.deviceCode + ','
        return mItem.id
      })
      if (rowDeleteIdArr.length === 0) {
        this.elMessage('表格选项不能为空', 'warning')
        return
      }
      const stringLength = deleteNameTitle.length - 1
      await this.elConfirm('删除', `您确定要删除${deleteNameTitle.slice(0, stringLength)}吗`)
      const data = rowDeleteIdArr
      console.log('data', data)
      this.$axiosReq({
        url: `rxdrepairsaas-basiccenter/terminal`, data,
        method: 'DELETE', bfLoading: true
      }).then(res => {
        this.elMessage('删除成功')
        this.selectPageReq()
      })
    },
    // 省市区选项列表
    areaOptionReq() {
      this.$axiosReq({
        url: 'rxdrepairsaas-basiccenter/option/areaOption',
        method: 'get', bfLoading: true
      }).then(res => {
        this.areaOptionData = res.data
      })
    },
    // 议选项列表
    terminalCategoryOptionReq() {
      this.$axiosReq({
        url: 'rxdrepairsaas-basiccenter/option/terminalCategoryOption',
        method: 'get', bfLoading: true
      }).then(res => {
        this.terminalCategoryOptionData = res.data
      })
    },
    // 车辆品牌车系车型选项列表
    vehicleCategoryOptionReq() {
      this.$axiosReq({
        url: 'rxdrepairsaas-basiccenter/option/vehicleCategoryOption',
        method: 'get', bfLoading: true
      }).then(res => {
        this.vehicleCategoryOptionData = res.data
      })
    },
    // 议选项列表
    terminalKindOptionReq() {
      this.$axiosReq({
        url: 'rxdrepairsaas-basiccenter/option/terminalKindOption',
        method: 'get', bfLoading: true
      }).then(res => {
        this.terminalKindOptionData = res.data
      })
    },
    // 所属机构选项列表
    workUnitOptionReq() {
      this.$axiosReq({
        url: 'rxdrepairsaas-basiccenter/option/workUnitOption',
        method: 'get', bfLoading: true
      }).then(res => {
        this.workUnitOptionData = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  #iDterminal {
    padding: 15px 10px;
  }
  .main_content {
    padding: 10px !important;
    background-color: #fff !important;
  }
</style>

<style lang="scss">
  #iDterminal {
    .el-upload-dragger {
      width: 220px;
      height: 145px;
    }

  }
  .colErrorBg{
    color:#FF2525;
    font-weight: 600;
  }
</style>
